<template>
    <el-table :data="filteredArticleList" style="width: 100%">
        <el-table-column label="ID" width="80">
            <template #default="scope">
                <span>{{ scope.row.aid }}</span>
            </template>
        </el-table-column>
        <el-table-column label="Title">
            <template #default="scope">
                <el-popover effect="light" trigger="hover" placement="top" width="auto">
                    <template #default>
                        <div>Title: {{ scope.row.title }}</div>
                        <div>Description: {{ scope.row.description }}</div>
                        <div>Author: {{ scope.row.author }}</div>
                    </template>
                    <template #reference>
                        <el-tag>{{ scope.row.title }}</el-tag>
                    </template>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="Author">
            <template #default="scope">
                <span>{{ scope.row.author }}</span>
            </template>
        </el-table-column>
        <el-table-column label="Created At" width="180">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon>
                        <timer />
                    </el-icon>
                    <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                </div>
            </template>
        </el-table-column>
        <!-- <el-table-column label="Updated At" width="180">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon>
                        <timer />
                    </el-icon>
                    <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
                </div>
            </template>
        </el-table-column> -->
        <el-table-column label="Description">
            <template #default="scope">
                <span>{{ scope.row.description }}</span>
            </template>
        </el-table-column>
        <!-- <el-table-column label="Likes" width="100">
            <template #default="scope">
                <span>{{ scope.row.likeCount }}</span>
            </template>
        </el-table-column> -->
        <el-table-column label="Views" width="100">
            <template #default="scope">
                <span>{{ scope.row.pageView }}</span>
            </template>
        </el-table-column>
        <!-- <el-table-column label="Status" width="100">
            <template #default="scope">
                <el-switch v-model="scope.row.status" disabled></el-switch>
            </template>
        </el-table-column> -->
        <el-table-column label="Operations">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                    通过
                </el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                    拒绝
                </el-button>
            </template>
        </el-table-column>
        <el-table-column>
            <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Timer } from '@element-plus/icons-vue';

// 定义文章接口
const handleEdit = (index, row) => {
    console.log('Edit:', index, row);
};

const handleDelete = (index, row) => {
    console.log('Delete:', index, row);
};

// 模拟的文章数据
const articleList = ref([
    {
        aid: 1,
        title: 'Article 1',
        author: 'Author A',
        createTime: '2024-07-01',
        updateTime: '2024-07-20',
        description: 'Description of Article 1',
        likeCount: 123,
        pageView: 456,
        status: true
    },
    {
        aid: 2,
        title: 'Article 2',
        author: 'Author B',
        createTime: '2024-06-15',
        updateTime: '2024-07-10',
        description: 'Description of Article 2',
        likeCount: 789,
        pageView: 1011,
        status: false
    }
    // 添加更多数据...
]);

const search = ref('');

const filteredArticleList = computed(() =>
    articleList.value.filter(
        (data) =>
            !search.value ||
            data.title.toLowerCase().includes(search.value.toLowerCase())
    )
);
</script>

<style scoped>
.mainTitle {
    margin-left: 30px;
    font-size: 18px;
    color: #000;
    font-weight: bolder;
}
</style>